<script setup>
import { ref } from 'vue'
const activeName = ref('first')
const tableData = [
  {
    date: '1',
    name: 'Tom',
    address: 'No'
  },
  {
    date: '2',
    name: 'Tom',
    address: 'No'
  },
  {
    date: '3',
    name: 'Tom',
    address: 'No'
  },
  {
    date: '4',
    name: 'Tom',
    address: 'No'
  }
]
</script>
<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="线索分配" name="first">
      <el-row type="flex" justify="end">
        <el-button
          style="border-radius: 30px; margin:25px 30px 25px 0; width: 100px; height: 35px"
          type="danger"
          >添加规则</el-button
        >
      </el-row>
      <el-table
        :data="tableData"
        :default-sort="{ prop: 'date', order: 'descending' }"
        style="width: 100%; margin-top: 20px"
        empty-text="暂无数据"
      >
        <el-table-column align="center" prop="date" label="序号" width="228"></el-table-column>
        <el-table-column align="center" prop="name" label="编号" width="228"></el-table-column>
        <el-table-column align="center" prop="address" label="条件" width="228"></el-table-column>
        <el-table-column prop="address" label="分配" width="228" align="center"></el-table-column>
        <el-table-column label="操作" width="228" align="center">
          <template>
            <el-button type="primary" text>修改</el-button>
            <el-button type="danger" text>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="线索池管理" name="second"></el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.demo-tabs {
  height: 100%;
  width: 100%;
  background-color: #fff;
  :deep(.el-tabs__active-bar) {
    height: 3px;
    border-radius: 3px;
  }
  :deep(.el-tabs__nav) {
    transform: translateX(20px) !important;
  }
  :deep(.el-tabs__item) {
    margin-bottom: 8px !important;
  }
}
</style>
